<template>
  <div v-if="Model">
    <div class="mb"></div>
    <div class="box">
      <div class="img" @click="off">
        <img src="../assets/close.png" style="width:0.32rem;height:0.32rem"  />
      </div>
      <div style="white-space: pre-wrap;" v-html="msg"></div>
      <button>{{butName}}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "model",
  data() {
    return {
      // msg:'是否关闭房源推送功能？关闭后将不能第一时间获取到新房源信息。'
      Model:this.isModel
    };
  },
  props: ["msg", "butName",'isModel'],
  methods: {
    off() {
        console.log(this)
       if (this.Model) {
        this.Model = false;
      } else {
        this.Model = true;
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mb {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.box {
  position: fixed;
  top: 3rem;
  left: 0.65rem;
  width: 7.7rem;
  padding: 0.6rem 0.5rem;
  background: #fff;
  text-align: center;
  border-radius: 0.08rem;
  z-index: 11;
  overflow: hidden;
}
button {
  width: 4.5rem;
  height: 0.88rem;
  margin-top: 0.6rem;
  background: rgba(246, 205, 72, 1);
  box-shadow: 0px 0.02rem 0.08rem 0px rgba(221, 211, 202, 0.6);
  border-radius: 0.44rem;
}
.img {
  position: relative;
  top: 0;
  right: 0;
  text-align: right;
}
</style>
